<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>快速应用</title>
  <link rel="stylesheet" href="css/all.min.css">
  <style>
    body {
      margin: 0;
      padding: 8px;
      background: transparent;
      font-family: "Microsoft YaHei", Arial, sans-serif;
      user-select: none;
      width: 220px;
      height: 400px;
      box-sizing: border-box;
      -webkit-app-region: no-drag;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .header {
      padding: 0 4px 8px 4px;
      color: #333;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      margin: 8px 4px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .app-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 8px;
      flex: 1;
    }

    /* 自定义滚动条样式 */
    .app-list::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    .app-list::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }

    .app-list::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 2px;
    }

    .app-list::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.3);
    }

    .app-list::-webkit-scrollbar-corner {
      background: transparent;
    }
    
    .app-item {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      background: #f5f5f5;
      -webkit-app-region: no-drag;
    }
    
    .app-item:hover {
      background: #e9e9e9;
      transform: translateY(-2px);
    }

    .app-item:active {
      background: #ddd;
    }
    
    .app-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      margin-right: 12px;
      border-radius: 8px;
      background: linear-gradient(135deg, #4e54c8, #8f94fb);
      color: white;
      font-size: 16px;
      flex-shrink: 0;
    }

    .app-icon-safari { background: linear-gradient(135deg, #3498db, #2980b9); }
    .app-icon-chrome { background: linear-gradient(135deg, #f5af19, #f12711); }
    .app-icon-edge { background: linear-gradient(135deg, #00c6ff, #0072ff); }
    .app-icon-firefox { background: linear-gradient(135deg, #ff7e5f, #feb47b); }
    .app-icon-video { background: linear-gradient(135deg, #11998e, #38ef7d); }
    .app-icon-music { background: linear-gradient(135deg, #834d9b, #d04ed6); }
    .app-icon-document { background: linear-gradient(135deg, #4facfe, #00f2fe); }
    .app-icon-image { background: linear-gradient(135deg, #f83600, #f9d423); }
    .app-icon-code { background: linear-gradient(135deg, #6a11cb, #2575fc); }
    .app-icon-game { background: linear-gradient(135deg, #fa709a, #fee140); }
    .app-icon-mail { background: linear-gradient(135deg, #4481eb, #04befe); }
    .app-icon-chat { background: linear-gradient(135deg, #56ab2f, #a8e063); }
    
    .app-item span {
      font-size: 13px;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      pointer-events: none;
    }

    .no-apps {
      text-align: center;
      color: #666;
      padding: 20px;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <div class="header">
    <span>常用应用</span>
    <span id="appCount"></span>
  </div>
  <div class="app-list" id="appList">
    <!-- 应用列表将通过JavaScript动态生成 -->
  </div>
  
  <script>
    const { ipcRenderer } = require('electron')
    const path = require('path')
    
    // 根据应用名称智能选择图标
    function getAppIconInfo(appName) {
      const nameLower = appName.toLowerCase();
      
      // 浏览器
      if (nameLower.includes('safari')) return { icon: 'fab fa-safari', className: 'app-icon-safari' };
      if (nameLower.includes('chrome')) return { icon: 'fab fa-chrome', className: 'app-icon-chrome' };
      if (nameLower.includes('edge')) return { icon: 'fab fa-edge', className: 'app-icon-edge' };
      if (nameLower.includes('firefox')) return { icon: 'fab fa-firefox', className: 'app-icon-firefox' };
      if (nameLower.includes('browser') || nameLower.includes('浏览器')) return { icon: 'fas fa-globe', className: 'app-icon-edge' };
      
      // 社交媒体和通讯
      if (nameLower.includes('facetime')) return { icon: 'fas fa-video', className: 'app-icon-video' };
      if (nameLower.includes('mail') || nameLower.includes('邮件')) return { icon: 'fas fa-envelope', className: 'app-icon-mail' };
      if (nameLower.includes('微信') || nameLower.includes('wechat')) return { icon: 'fab fa-weixin', className: 'app-icon-chat' };
      if (nameLower.includes('qq')) return { icon: 'fab fa-qq', className: 'app-icon-chat' };
      if (nameLower.includes('message') || nameLower.includes('信息')) return { icon: 'fas fa-comment', className: 'app-icon-chat' };
      
      // 办公软件
      if (nameLower.includes('word') || nameLower.includes('文档')) return { icon: 'fas fa-file-word', className: 'app-icon-document' };
      if (nameLower.includes('excel') || nameLower.includes('表格')) return { icon: 'fas fa-file-excel', className: 'app-icon-document' };
      if (nameLower.includes('powerpoint') || nameLower.includes('演示')) return { icon: 'fas fa-file-powerpoint', className: 'app-icon-document' };
      if (nameLower.includes('pdf')) return { icon: 'fas fa-file-pdf', className: 'app-icon-document' };
      if (nameLower.includes('text') || nameLower.includes('文本')) return { icon: 'fas fa-file-alt', className: 'app-icon-document' };
      if (nameLower.includes('note') || nameLower.includes('笔记')) return { icon: 'fas fa-sticky-note', className: 'app-icon-document' };
      
      // 开发工具
      if (nameLower.includes('code') || nameLower.includes('编辑器') || nameLower.includes('编程')) 
          return { icon: 'fas fa-code', className: 'app-icon-code' };
      if (nameLower.includes('terminal') || nameLower.includes('命令') || nameLower.includes('终端'))
          return { icon: 'fas fa-terminal', className: 'app-icon-code' };
      if (nameLower.includes('git') || nameLower.includes('github'))
          return { icon: 'fab fa-github', className: 'app-icon-code' };
      
      // 多媒体
      if (nameLower.includes('music') || nameLower.includes('音乐') || nameLower.includes('播放器'))
          return { icon: 'fas fa-music', className: 'app-icon-music' };
      if (nameLower.includes('video') || nameLower.includes('视频') || nameLower.includes('影音'))
          return { icon: 'fas fa-film', className: 'app-icon-video' };
      if (nameLower.includes('photo') || nameLower.includes('图片') || nameLower.includes('图像'))
          return { icon: 'fas fa-image', className: 'app-icon-image' };
      
      // 系统工具
      if (nameLower.includes('folder') || nameLower.includes('访达') || nameLower.includes('文件夹') || nameLower.includes('explorer'))
          return { icon: 'fas fa-folder', className: 'app-icon-document' };
      if (nameLower.includes('setting') || nameLower.includes('设置'))
          return { icon: 'fas fa-cog', className: 'app-icon-code' };
      
      // 娱乐
      if (nameLower.includes('game') || nameLower.includes('游戏'))
          return { icon: 'fas fa-gamepad', className: 'app-icon-game' };
      
      // 默认返回一个应用图标
      return { icon: 'fas fa-cube', className: '' };
    }
    
    // 从localStorage获取并显示应用列表
    function loadApps() {
      const appList = document.getElementById('appList')
      const appCount = document.getElementById('appCount')
      appList.innerHTML = ''
      
      try {
        // 从本地存储获取数据
        const launcherAppsStr = localStorage.getItem('launcherApps')
        const apps = launcherAppsStr ? JSON.parse(launcherAppsStr) : []
        
        // 更新应用数量显示
        const validApps = apps.filter(app => app && app.path && app.name)
        appCount.textContent = `${validApps.length}个应用`
        
        if (validApps.length === 0) {
          appList.innerHTML = '<div class="no-apps">暂无快捷应用</div>'
          return
        }

        // 创建应用列表
        validApps.forEach((app, index) => {
          const appItem = document.createElement('div')
          appItem.className = 'app-item'
          
          // 根据应用名称确定图标和类别
          const iconInfo = getAppIconInfo(app.name);
          
          appItem.innerHTML = `
            <div class="app-icon ${iconInfo.className}">
              <i class="${iconInfo.icon}"></i>
            </div>
            <span title="${app.name}">${app.name}</span>
          `
          
          // 添加点击事件处理
          appItem.addEventListener('click', (e) => {
            e.stopPropagation()
            ipcRenderer.send('launch-quick-app', app.path)
            setTimeout(() => {
              ipcRenderer.send('mouse-leave')
            }, 100)
          })
          
          appList.appendChild(appItem)
        })
      } catch (error) {
        console.error('加载应用列表失败:', error)
        appList.innerHTML = '<div class="no-apps">加载失败</div>'
        appCount.textContent = '加载失败'
      }
    }

    // 监听主进程发送的数据
    ipcRenderer.on('launcher-apps-data', (event, launcherAppsStr) => {
      // 将主窗口的数据保存到本地存储
      if (launcherAppsStr) {
        localStorage.setItem('launcherApps', launcherAppsStr)
      }
      // 从本地存储加载数据
      loadApps()
    })

    // 页面加载完成后尝试从本地加载数据
    document.addEventListener('DOMContentLoaded', () => {
      loadApps()
    })

    // 监听鼠标离开窗口事件
    let leaveTimeout
    document.addEventListener('mouseleave', () => {
      if (leaveTimeout) clearTimeout(leaveTimeout)
      leaveTimeout = setTimeout(() => {
        ipcRenderer.send('mouse-leave')
      }, 200)
    })

    // 取消鼠标离开事件
    document.addEventListener('mouseenter', () => {
      if (leaveTimeout) {
        clearTimeout(leaveTimeout)
      }
    })
  </script>
</body>
</html> 